<!--公共头部-->
{template 'aitimt/common/header'}
		<style>
			.mui-preview-image.mui-fullscreen {position: fixed;z-index: 20;background-color: #000;}
			.mui-preview-header, .mui-preview-footer {position: absolute;width: 100%;left: 0;z-index: 10;}
			.mui-preview-header {height: 44px;top: 0;}  .mui-preview-footer {height: 50px;bottom: 0px;}
			.mui-preview-header .mui-preview-indicator {display: block;line-height: 25px;color: #fff;text-align: center;margin: 15px auto 4px;width: 70px;background-color: rgba(0, 0, 0, 0.4);border-radius: 12px;font-size: 16px;}
			.mui-preview-image {display: none;-webkit-animation-duration: 0.5s;animation-duration: 0.5s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
			.mui-preview-image.mui-preview-in {-webkit-animation-name: fadeIn;animation-name: fadeIn;}
			.mui-preview-image.mui-preview-out {background: none;-webkit-animation-name: fadeOut;animation-name: fadeOut;}
			.mui-preview-image.mui-preview-out .mui-preview-header, .mui-preview-image.mui-preview-out .mui-preview-footer {display: none;}
			.mui-zoom-scroller {position: absolute;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;justify-content: center;left: 0;right: 0;bottom: 0;top: 0;width: 100%;height: 100%;margin: 0;-webkit-backface-visibility: hidden;}
			.mui-zoom {-webkit-transform-style: preserve-3d;transform-style: preserve-3d;}
			.mui-slider .mui-slider-group .mui-slider-item img {width: auto;height: auto;max-width: 100%;max-height: 100%;}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {width: 100%;}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {display: inline-table;}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {display: table-cell;vertical-align: middle;}
			.mui-preview-loading {position: absolute;width: 100%;height: 100%;top: 0;left: 0;display: none;}
			.mui-preview-loading.mui-active {display: block;}
			.mui-preview-loading .mui-spinner-white {position: absolute;top: 50%;left: 50%;margin-left: -25px;margin-top: -25px;height: 50px;width: 50px;}
			.mui-preview-image img.mui-transitioning {-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;transition: transform 0.5s ease, opacity 0.5s ease;}
			@-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }
			@keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }
			@-webkit-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} }
			@keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} }
			p img {max-width: 100%;height: auto;}
			.mui-content-padded{margin: 0}
			.mui-table-view .mui-media, .mui-table-view .mui-media-body{line-height: 2rem;}
			.mui-slider-indicator.mui-segmented-control .mui-control-item {border-left:1px solid #c1c1c1 ;border-bottom:1px solid #c1c1c1 ;padding: 1px;color: #585858;}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{border-bottom:3px solid #e94709 ;color: #585858;}
			.addtime{padding-top: 10px;font-size: 10px;}
			.mui-bar-tab .mui-tab-item .mui-icon{margin: 0 27%;font-size: 20px;}
			.mui-bar-tab .mui-tab-item{color: #fff;text-align: unset;background: #E94709;}
			.mui-bar-tab .mui-tab-item.mui-active{color: #FFFFFF;}
			.mui-tab-label{font-size: 20px;}
			.mui-content{padding: 25% 0;background: #fff;}
			.mui-bar-nav~.mui-content{margin-top: 1%;}
			.mui-media{float: left;width: 50%;}
			.mui-input-group .mui-input-row{background-color: #eeeeee;}
			.mui-table-view-cell:after{height: 0;}
			.mui-input-group:after,.mui-table-view:after,.mui-table-view::before,.mui-input-group .mui-input-row:after{height: 0;}
			.mui-table-view-cell img{max-width: 100%!important;width: 100% !important;height: 5rem!important;}
			.mui-table-view-cell a{padding: 5%;}
			.mui-input-group:before{height: 0;}
			.mui-table-view-cell.mui-active{background: #ffffff;}
			.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{color: #E94709;}
			.photo-checkbox{position: absolute;right: -0.1%;top: 15px;}
			.photo-do{position: fixed!important;width: 100%;bottom: 0}
			.photo-do .mui-tab-item{display: table-cell;overflow: hidden;width: 1%;height: 50px;text-align: center;vertical-align: middle;white-space: nowrap;text-overflow: ellipsis;color: white;}
			.photo-do .mui-tab-item .mui-icon {font-size: 24px;position: relative;z-index: 20;top: 3px;width: 24px;height: 24px;padding-top: 0;padding-bottom: 0;}
			.photo-do .mui-tab-item .mui-icon~.mui-tab-label {font-size: 11px;display: block;overflow: hidden;text-overflow: ellipsis;}
			.photo-do .mui-active{color: #E94709}

		</style>
<!-- 公共头部start -->
<header class="mui-bar mui-bar-nav">
	<a class="top-return mui-action-back"><img src="{$aideUrl}app/resource/aitimt/images/return.png" ></a>
	<a class="top-logo"><img src="{$aideUrl}app/resource/aitimt/images/logo.png" ></a>
	<!--公共菜单start -->
	{template 'aitimt/common/menu'}
	<!-- 公共菜单end-->
</header>
{if $type=='report'}
<style>
	.mui-table-view-cell img{max-width: 100%!important;width: 100% !important;height: 15rem!important;}
</style>
{/if}
		<div class="mui-content">
			<form class="mui-input-group">
				<div class="mui-input-row mui-checkbox mui-left">
					<label id="all" style="width: 60%;"></label>
					<input name="checkbox" value="1" type="checkbox" id="checkAll">
					<span>已选<span id="sum" style="color: red;">0</span>张</span>
					<span class="mui-icon mui-icon-trash" onclick="del()"></span>
				</div>

			<ul class="mui-table-view">
				{loop $photoList $item}
				<li class="mui-table-view-cell mui-media mui-content-padded">
					<input name="subcheck" value="2" type="checkbox" class="photo-checkbox">
					<img class="mui-media-object mui-pull-left" data-preview-src="" data-preview-group="1" src="{$item['img_src']}">
				</li>
				{/loop}
			</ul>
			</form>
		</div>
<div class="photo-do" id="photo-do">
	<a class="mui-tab-item" id="index" onclick="collect('index',this)">
		<span class="mui-icon iconfont icon-shoucang"></span>
		<span class="mui-tab-label">设为相册首页</span>
	</a>
	<a class="mui-tab-item" id="trash" onclick="trash(this)">
		<span class="mui-icon mui-icon-trash"></span>
		<span class="mui-tab-label">删除</span>
	</a>
</div>
		<!--&lt;!&ndash; 公共底部start &ndash;&gt;-->
		<!--<nav class="mui-bar mui-bar-tab">-->
			<!--<a class="mui-tab-item" href="#">-->
				<!--<span class="mui-icon iconfont icon-xiazai">-->
					<!--<span class="mui-tab-label">长按图片下载</span></span>-->
			<!--</a>-->
		<!--</nav>-->
		<!--&lt;!&ndash; 公共底部end &ndash;&gt;-->
<script type="text/javascript" src="{$aideUrl}app/resource/aitimt/js/mui.zoom.js?v=20170912"></script>
<script type="text/javascript" src="{$aideUrl}app/resource/aitimt/js/mui.previewimage.js?v=20170912"></script>
		<script type="text/javascript">
            mui.previewImage(
			);
            function del() {
                var sum=0;
                var type='{$type}';
                var all = document.getElementById("all");
                var len=mui("input[name='subcheck']").length;
                var btnArray = ['取消', '确定'];
                var msg='是否删除所选图片?';
                mui.confirm(msg,'',btnArray, function(e) {
                    if (e.index == 1) {
                        mui("input[name='subcheck']").each(function(){
                            if (this.checked==true){
                                sum++;
								var src=this.parentNode.getElementsByTagName("img")[0].src;
                                var arr ={img_src:src,type:type};
                                $.post("{php echo app_url('home/index/photoshow')}", arr, function(data){
                                    console.log(data);
                                },"json");
								this.parentNode.remove();

                            }
                        });
						len=len-sum;
                        document.getElementById("sum").innerHTML=0;
                        all.innerHTML = '全选('+len+')';
                        document.getElementById("checkAll").checked=false;
                        mui.toast('删除成功');
                    }
                });

            }
			function initStatus(imgSrc) {
                var index=document.getElementById('index');
                var type='{$type}';

                $.ajax({
                    type: 'post',
                    url: "{php echo app_url('home/index/photostatus')}",
                    data: {img_src:imgSrc,},
                    dataType: 'json',
                    success: function(data){
                        if (type=='collect'){
                            if (data.c_status==1){
                                index.classList.add('mui-active');
                            }else {
                                index.classList.remove('mui-active');
                            }
						} else if(type=='good'){
                            if (data.g_status==1){
                                index.classList.add('mui-active');
                            }else {
                                index.classList.remove('mui-active');
                            }
                        }else if(type=='report'){
                            if (data.r_status==1){
                                index.classList.add('mui-active');
                            }else {
                                index.classList.remove('mui-active');
                            }
                        }

                    },
                    error: function(xhr, type){
                    }
                });
                document.getElementById('photo-do').style='display:block;z-index: 100';
			}
            function imgSrc(){
                var src='';
                mui(".mui-preview-image .mui-slider-group .mui-slider-item").each(function (i,val) {
                    var name=this.className;
                    if(name.indexOf('mui-active')!=-1){
                        src= this.getElementsByTagName("img")[0].src;
                        return false;
                    }
                });
                return src;
            }
            function trash(cc) {
                var btnArray = ['取消', '确定'];
                var msg='是否删除此图片?';
                mui.confirm(msg,'',btnArray, function(e) {
                    if (e.index == 1) {
                        var src=imgSrc();
                        var all = document.getElementById("all");
                        var len=mui("input[name='subcheck']").length-1;
                        all.innerHTML = '全选('+len+')';
                        mui(".mui-table-view .mui-content-padded").each(function (i,val) {
                            if(this.getElementsByTagName("img")[0].src==src){
                                this.remove();
                            }
                        });
                        collect('{$type}','trash');
                        mui.previewImage().close();
                    }
                    cc.classList.remove('mui-active');
                });
            }
            function collect(type,cc){
                var src=imgSrc();
                var arr ={img_src:src,type:type,status:'{$type}'};
                $.post("{php echo app_url('home/index/photoshow')}", arr, function(data){
                    console.log(data);
                    if(data.errno == 0){
                        if (cc=='trash'){
                            mui.toast('删除成功');
						}else{
                            mui.toast(data.msg);
                            cc.classList.remove('mui-active');
						}

                    }else{
						mui.toast(data.msg);
                    }
                },"json");
            }
			function photoClose() {
                document.getElementById('photo-do').style='display:none';
            }
            mui('.mui-content-padded').on('tap','p',function(){
                mui.previewImage().close();
                if(document.getElementById('__MUI_PREVIEWIMAGE').style.display!='block'){
                    document.getElementById('photo-do').style='display:block;z-index: 100';
                }
            });
            var sum = document.getElementById("sum");
			var all = document.getElementById("all");
			var len=mui("input[name='subcheck']").length;
            all.innerHTML = '全选('+len+')';
			mui('.mui-input-group').on('change', 'input', function() {
				if(this.value==1&&this.checked==true){
					 mui("input[name='subcheck']").each(function(){
						this.checked=true;
						});
                    sum.innerHTML = mui("input[name='subcheck']:checked").length;

				}else if(this.value==1&&this.checked==false){
					mui("input[name='subcheck']").each(function(){
					   this.checked=false;
				   });
				   sum.innerHTML = 0;
				}else{
					sum.innerHTML = mui("input[name='subcheck']:checked").length;
				}
			});
		</script>

	</body>

</html>
